<template>
  <div class="container">
    <el-tabs v-model="activeName" style="padding-left:30px">
      <!-- 基本信息 -->
      <el-tab-pane label="信息配置" name="first">
        <div class="section">
          <ul class="info">
            <div class="section">
              <h2 class="title">基本信息</h2>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院名称：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.HospitalName"
                    class="form"
                    type="text"
                    placeholder="请输入医院名称"
                  />
                </div>
                <!-- -->
                <div class="tip">
                  <span class="must">*</span> 省份城市：
                </div>
                <div class="detail">
                  <el-select v-model="form.Province" class="form" placeholder="请选择省份">
                    <el-option
                      v-for="item in province"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院地址：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.LocationDes"
                    class="form"
                    type="text"
                    placeholder="请输入医院地址"
                    @blur="getLngLat"
                  />
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院坐标：
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 经度：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.LocationLng"
                    class="form"
                    type="text"
                    placeholder="请输入经度"
                  />
                </div>
                <!-- -->
                <div class="tip">
                  <span class="must">*</span> 纬度：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.LocationLat"
                    class="form"
                    type="text"
                    placeholder="请输入纬度"
                  />
                </div>
              </li>
              <div v-show="isShow" id="mapcontainer" />
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院好评率：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.applauseRate"
                    class="form"
                    type="text"
                    placeholder="请输入医院好评率"
                  >
                    <template slot="append">%</template>
                  </el-input>
                </div>
                <!-- -->
                <div class="tip">
                  <span class="must">*</span> 医院预约量：
                </div>
                <div class="detail">
                  <el-input
                    v-model="form.reservations"
                    class="form"
                    type="text"
                    placeholder="请输入医院预约量"
                  />
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院签约板块：
                </div>
                <div class="detail">
                  <el-select v-model="form.type" class="form" placeholder="请选择医院签约板块">
                    <el-option
                      v-for="item in AppType_arr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                <!-- -->
                <div class="tip">
                  <span class="must">*</span> 医院类型：
                </div>
                <div class="detail">
                  <el-select v-model="form.hospitalType" class="form" placeholder="请选择医院类型">
                    <el-option
                      v-for="item in hospitalType_arr"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
              </li>
            </div>
          </ul>
        </div>
        <div class="sub-btn">
          <el-button type="primary" @click="next_hospital()">下一页</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="医院材料配置" name="second">
        <div class="section">
          <ul class="info">
            <div class="section">
              <h2 class="title">图片和详情</h2>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院logo：
                  <div class="msk">图片尺寸:1:1 推荐（355px*355px）</div>
                </div>
                <div class="detail project_detail">
                  <!-- <ul class="img-list">
                <li v-for="(item, index) in hospital_Icon_list" :key="index" class="img-item">
                  <img v-if="item.url" :src="item.url" alt class="img" />
                  <div class="del-btn" @click.stop="del_main(item)">
                    <i class="el-icon-delete" />
                  </div>
                </li>
                  </ul>-->
                  <div class="upload-btn">
                    <!-- <el-upload
                  action="https://mpingweb.yuepinyuemei.com/api/upload"
                  :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                  :multiple="false"
                  :file-list="hospital_Icon_list"
                  :show-file-list="false"
                  list-type="picture-card"
                  :on-success="upload_main"
                  :before-upload="before_main"
                  :on-remove="del_main"
                >
                  <i class="el-icon-plus icon" />
                    </el-upload>-->
                    <newUpload ref="uploadImg1" :fileNum="1" :file-list="fileList1" />
                  </div>
                </div>
                <!-- -->
                <div class="tip">
                  <span class="must">*</span>医院主辅图：
                  <div class="msk">图片尺寸:1:1</div>
                </div>
                <div class="detail project_detail">
                  <!-- <ul class="img-list">
                <li v-for="(item, index) in show_Image_list" :key="index" class="img-item">
                  <img v-if="item.url" :src="item.url" alt class="img" />
                  <div class="del-btn" @click.stop="del_arr(item)">
                    <i class="el-icon-delete" />
                  </div>
                </li>
                  </ul>-->
                  <div class="upload-btn">
                    <!-- <el-upload
                  action="https://mpingweb.yuepinyuemei.com/api/upload"
                  :data="{
                  dirPath: 'authentication',
                  upload_status: true }"
                  :multiple="true"
                  :limit="5"
                  :file-list="show_Image_list"
                  :show-file-list="false"
                  list-type="picture-card"
                  :on-success="upload_arr"
                  :before-upload="before_main"
                  :on-remove="del_arr"
                >
                  <i class="el-icon-plus icon" />
                    </el-upload>-->
                    <newUpload ref="uploadImg2" :fileNum="2" :file-list="fileList2" />
                  </div>
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院简介：
                </div>
                <div class="detail project_detail">
                  <textarea
                    id="form-control"
                    v-model="form.HospitalIntro"
                    type="text"
                    class="form-control comment-input"
                    placeholder="请输入医院简介，最多输入400字"
                    maxlength="400"
                    @keyup="selfAdaption($event)"
                  />
                  <span v-html="form.HospitalIntro.length" />/400字
                </div>
              </li>
              <li class="list-item">
                <div class="tip">
                  <span class="must">*</span> 医院详情：
                </div>
                <div class="detail project_detail">
                  <tinymce
                    :id="tinymceId"
                    v-model="form.hospitalDetail"
                    :min-height="750"
                    :width="760"
                  />
                </div>
              </li>
            </div>
            <div class="sub-btn">
              <el-button type="primary" @click="save_hosptail()">保存</el-button>
            </div>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import tinymce from "@/components/Tinymce";
import { getProjectDetail, projectDetail } from "../../api/project";
import { getLat, addHospital, updateHospital } from "../../api/hospitalAdd";
import { validLonreg } from "../../utils/validate";
import { provinceList } from "../../api/province";
import { getHospitalList } from "../../api/hospitalManage";
import newUpload from "@/components/UploadImg/shopImgUp";
export default {
  components: {
    tinymce,
    newUpload,
  },
  data() {
    return {
      page_status: 1,
      activeName: "first",
      tinymceId: this.id || "vue-tinymce" + Date.parse(new Date()),
      formLabelWidth: "120px", // 列表label宽度
      hospitalType_arr: [
        { id: 1, name: "诊所" },
        { id: 2, name: "门诊部" },
        { id: 3, name: "医院" },
      ], //医院类型
      AppType_arr: [
        { id: 1, name: "齿科" },
        { id: 2, name: "眼科" },
        { id: 3, name: "口腔" },
        { id: 4, name: "整容" },
        { id: 5, name: "健康" },
      ], //医院板块
      province: [], // 省份列表
      form: {
        id: undefined, //医院id
        type: "", //板块
        HospitalName: "", //	医院名称
        LocationDes: "", //		医院地址
        Province: "", //		所在省
        HospitalIntro: "", //		医院简介
        LocationLat: "", //		医院纬度
        LocationLng: "", //		医院经度
        HospitalIcon: "", //		医院图标
        ShowImage: "", //		展示图
        // id:'',  //		医院ID
        isOn: 1, //		医院上架状态
        hospitalType: "", //		机构类型
        reservations: "", //		预约量
        applauseRate: "", //	好评率
        hospitalDetail: "", //医院详情
      },
      fileList1: [],
      fileList2: [],
      isShow: false, // 地图显示
      rules: {
        hospitalName: [
          {
            required: true,
            message: "请输入医院名称",
            trigger: "blur",
          },
          {
            max: 19,
            min: 2,
            message: "长度必须在2-19个字符之间",
            trigger: "blur",
          },
        ],
        province_id: [
          {
            required: true,
            message: "请选择省份",
            trigger: "blur",
          },
        ],
        locationDes: [
          {
            required: true,
            message: "请输入医院地址",
            trigger: "blur",
          },
          {
            max: 50,
            min: 5,
            message: "长度必须在5-50个字符之间",
            trigger: "blur",
          },
        ],
        locationLng: [
          {
            required: true,
            message: "请输入经度",
          },
          {
            validator: validLonreg,
            trigger: "blur",
            message: "请输入正确经度",
          },
        ],
        locationLat: [
          {
            required: true,
            message: "请输入纬度",
            trigger: "blur",
          },
          {
            validator: validLonreg,
            trigger: "blur",
            message: "请输入正确纬度",
          },
        ],
        hospitalIntro: [
          {
            required: true,
            message: "请输入医院简介，最多输入400字",
            trigger: "blur",
          },
        ],
      },
      hospital_Icon_list: [], //logo图
      show_Image_list: [], // 展示图
    };
  },
  created() {
    // 页面状态  1 添加  2 编辑
    this.page_status = this.$route.query.page_status;
    switch (this.$route.query.page_status) {
      case 1:
        this.$route.meta.title = "添加医院";
        break;
      case 2:
        this.$route.meta.title = "编辑医院";
        break;
      default:
        break;
    }
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.get_detail();
    }
    this.get_province_list();
  },
  watch: {
    "form.ShowImage"(val) {
      const arr = [];
      if (Array.isArray(val)) {
        val.forEach((item, index) => {
          arr.push({
            name: index,
            url: this.common.img_url + item,
          });
        });
        this.show_Image_list = arr;
        this.$forceUpdate();
      }
    },
    "form.HospitalIcon"(val) {
      const arr = [
        {
          name: "main",
          url: this.common.img_url + val,
        },
      ];
      this.hospital_Icon_list = arr;
      this.$forceUpdate();
    },
  },
  methods: {
    selfAdaption(e) {
      if (e.target.scrollHeight > 114) {
        return false; // 114是输入框6行的高度，超过6行就使用滚动条
      }
      e.target.style.height = "auto";
      e.target.scrollTop = 0; // 防抖动
      e.target.style.height = e.target.scrollHeight + "px"; // 将输入框高度置为其可滚动高度
    },

    // 获取经纬度
    getLngLat() {
      if (this.form.LocationDes) {
        const datas = {
          address: this.form.LocationDes,
        };
        console.log(this.form.address);
        getLat(datas)
          .then((res) => {
            // if (res.status==200) {
            console.log("res", res);
            this.form.LocationLng = res.data.lng;
            this.form.LocationLat = res.data.lat;
            this.getMap(res.data);
            // }
          })
          .catch((err) => {
            // this.errorStatus(err.msg);
          });
      }
    },
    // 地图获取显示
    getMap(e) {
      console.log(e);
      var map = new AMap.Map("mapcontainer", {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15, // 初始化地图层级
        center: [e.lng, e.lat], // 初始化地图中心点
      });
      var marker = new AMap.Marker({
        position: [e.lng, e.lat], // 位置
      });
      // AMap.plugin(['AMap.ToolBar',''],function () {
      //     map.addControl(new AMap.ToolBar())
      //     })
      this.isShow = true;
      map.add(marker);
    },
    // 获取省份
    get_province_list() {
      provinceList({})
        .then((res) => {
          // this.form.province = res.data.data.list
          this.province = res.data.data.list;
        })
        .catch((res) => {
          this.$message.error("网络连接错误，请稍后再试");
        });
    },

    //获取医院详情
    get_detail() {
      getHospitalList({
        pageNum: 1,
        pageSize: 10,
        id: this.form.id,
      })
        .then((res) => {
          console.log("res", res);
          if (res.data.code === 0) {
            if (res.data.data.list) {
              let List = [""];
              List = res.data.data.list;
              this.hospitalInfo = List[0];
              console.log("res.data.data.list", this.hospitalInfo);
              this.form.HospitalName = this.hospitalInfo.hospitalName;
              this.form.Province = this.hospitalInfo.provinceId;
              this.form.LocationDes = this.hospitalInfo.locationDes;
              this.form.LocationLat = this.hospitalInfo.locationLat;
              this.form.LocationLng = this.hospitalInfo.locationLng;
              this.form.applauseRate = this.hospitalInfo.applauseRate;
              this.form.reservations = this.hospitalInfo.reservations;
              this.form.type = this.hospitalInfo.appType;
              this.form.hospitalType = this.hospitalInfo.hospitalType;
              this.form.HospitalIcon = this.hospitalInfo.hospitalIcon;
              this.form.ShowImage = this.hospitalInfo.showImage;
              this.form.HospitalIntro = this.hospitalInfo.hospitalIntro;
              this.form.hospitalDetail = this.hospitalInfo.hospitalDetail;
              // console.log(List[0].hospitalIcon);
              this.fileList1.push({
                url: "https://img.yuepinyuemei.com/" + List[0].hospitalIcon,
              });
              // console.log(List[0].showImage);
              if (List[0].showImage.length) {
                List[0].showImage.forEach((i) => {
                  this.fileList2.push({
                    url: "https://img.yuepinyuemei.com/" + i,
                  });
                });
              }
            }
          }
        })
        .catch((err) => {
          //   this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err);
        });
    },

    //下一页
    next_hospital() {
      if (this.form.HospitalName === "") {
        this.$message.error("请输入医院名称");
      } else if (this.form.Province === "") {
        this.$message.error("请选择省份城市");
      } else if (this.form.LocationDes === "") {
        this.$message.error("请输入医院地址");
      } else if (this.form.LocationLat === "") {
        this.$message.error("请输入医院纬度");
      } else if (this.form.LocationLng === "") {
        this.$message.error("请输入医院经度");
      } else if (this.form.applauseRate === "") {
        this.$message.error("请输入医院好评率");
      } else if (this.form.applauseRate - 0 > 100) {
        this.$message.error("医院好评率不可输入大于100");
      } else if (this.form.reservations === "") {
        this.$message.error("请输入医院预约量");
      } else if (this.form.type === "") {
        this.$message.error("请选择医院所属板块");
      } else if (this.form.hospitalType === "") {
        this.$message.error("请选择医院类型");
      } else {
        this.activeName = "second";
      }
    },

    //保存
    save_hosptail() {
      this.form.HospitalIcon = this.$refs.uploadImg1.submitUpload()[0];
      console.log(this.$refs.uploadImg2.submitUpload());
      this.form.ShowImage = this.$refs.uploadImg2.submitUpload();
      if (this.form.HospitalName === "") {
        this.$message.error("请输入医院名称");
      } else if (this.form.Province === "") {
        this.$message.error("请选择省份城市");
      } else if (this.form.LocationDes === "") {
        this.$message.error("请输入医院地址");
      } else if (this.form.LocationLat === "") {
        this.$message.error("请输入医院纬度");
      } else if (this.form.LocationLng === "") {
        this.$message.error("请输入医院经度");
      } else if (this.form.applauseRate === "") {
        this.$message.error("请输入医院好评率");
      } else if (this.form.applauseRate - 0 > 100) {
        this.$message.error("医院好评率不可输入大于100");
      } else if (this.form.reservations === "") {
        this.$message.error("请输入医院预约量");
      } else if (this.form.type === "") {
        this.$message.error("请选择医院所属板块");
      } else if (this.form.hospitalType === "") {
        this.$message.error("请选择医院类型");
      } else if (this.form.HospitalIcon === "") {
        this.$message.error("请上传医院图标");
      } else if (this.form.ShowImage.length === 0) {
        this.$message.error("请上传医院展示图");
      } else if (this.form.HospitalIntro === "") {
        this.$message.error("请上传医院简介");
      } else if (this.form.hospitalDetail === "") {
        this.$message.error("请上传医院详情");
      } else {
        switch (this.page_status) {
          case 1:
            this.add_hospitail(this.form);
            break;
          case 2:
            this.rewrite_hospitail(this.form);
            break;

          default:
            break;
        }
      }
    },

    //添加
    add_hospitail(e) {
      addHospital(e)
        .then((res) => {
          if (res.data.code === 7001) {
            this.$message.error(res.data.msg);
          } else {
            this.$message({
              showClose: true,
              message: "添加" + res.data.msg,
              type: "success",
            });
            this.$router.go(-1);
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        });
    },

    //编辑
    rewrite_hospitail(e) {
      updateHospital(e)
        .then((res) => {
          if (res.data.code === 7001) {
            this.$message.error(res.data.msg);
          } else {
            this.$message({
              showClose: true,
              message: "添加" + res.data.msg,
              type: "success",
            });
            this.$router.go(-1);
          }
        })
        .catch((res) => {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 30px;
  .section {
    .title {
      width: 130px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;
      .list-item {
        margin-bottom: 20px;
        /*display: inline-block;*/
        .tip {
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
          width: 150px;
          text-align: right;
          .msk {
            font-size: 10px;
            color: #666;
            margin-right: 20px;
            margin-top: 10px;
          }
          .must {
            display: inline-block;
            vertical-align: middle;
            color: #ff3040;
          }
        }
        .detail {
          color: #666;
          min-width: 350px;
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          .el-select {
            display: block !important;
          }
          .img-list {
            display: inline-block;
            vertical-align: middle;
            .img-item {
              width: 150px;
              height: 150px;
              border: 1px solid #ccc;
              display: inline-block;
              vertical-align: middle;
              overflow: hidden;
              margin-right: 10px;
              position: relative;
              .img {
                width: 100%;
              }
              .del-btn {
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.3);
                color: #fff;
                line-height: 150px;
                text-align: center;
                font-size: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
                display: none;
              }
              &:hover {
                .del-btn {
                  display: block;
                }
              }
            }
          }
          .upload-btn {
            width: 150px;
            height: 150px;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            .el-icon-plus {
              width: 150px;
              height: 150px;
              display: block;
              position: relative;
              &::before {
                font-size: 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
          &.project_detail {
            vertical-align: top;
          }

          .rule {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: row;
          }
        }
      }
    }
  }
  .sub-btn {
    .el-button {
      margin: 80px auto 20px auto;
      display: block;
    }
  }
  .form-control {
    width: 100%;
    padding-right: 6px;
    min-height: 300px;
    -webkit-overflow-scrolling: touch;
    resize: none;
    outline: 0 none;
    margin-top: 12px;
    font-size: 14px;
    /*font-family: MicrosoftYaHei;*/
    color: rgba(13, 20, 30, 1);
    line-height: 19px;
    opacity: 0.6;
  }
  #mapcontainer {
    width: 350px;
    height: 350px;
    margin: 0 0 30px 150px;
    touch-action: none;
  }
}
</style>


